<template>
	<view class="height-100 bg-gray overflow-hidden">
		<!-- 搜索框 -->
		<!-- <view class="bg-white padding-bottom-sm">
			<view class="flex-direction-row align-center radius-sl bg-gray-q padding-sm margin"
				@click="$navigator('/pages/mall/search?type=-1')">
				<text class="text-xl iconfont color-black-b margin-left-xs">&#xe6c6;</text>
				<text class="text-smd color-black-q margin-lr-sm flex-sub">请输入商品名称</text>
			</view>
		</view> -->
		<!-- 商品列表 -->
		<view class="padding bg-white radius-xl margin">
			<block v-for='(item,index) in goodsList' :key='index'>
				<view class="padding-tb border-bottom flex-direction-row">
					<image :src="item.imageUrl" class="radius cu-yao" mode="aspectFit" @click="$navigator('/pages/mall/goods?id='+item.id)"></image>
					<view class="flex-direction-column margin-left flex-sub">
						<text class="text-df text-bold color-black">{{item.productName}}</text>
						<!-- <text class="text-sm color-black-q margin-tb-xs">规格：{{item.specsResList[0]?.name}}</text> -->
						<view class="flex-direction-row justify-end" @click="selectSpecsOpen(item)">
							<view class="radius bg-green padding-lr-xs flex-direction-row align-center" style="height: 42rpx;">
								<text class="text-sm color-white">选择</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		queryProductList
	} from "@/common/mall.js"
	export default {
		onLoad(option) {
			this.storeId = option.storeId;
			console.log('mall option: ', option.secondCategoryId);
			// this.secondCategoryId = option.secondCategoryId;
			if (option.firstCategoryId) {
				this.categoryId = option.firstCategoryId
				this.where = {
					'firstCategoryId': option.firstCategoryId
				}
			} else if (option.secondCategoryId) {
				this.where = {
					'secondCategoryId': option.secondCategoryId
				}
			}
			// this.where = {'secondCategoryId': option.secondCategoryId}
			// this.getCategoryList();
			this.getGoods();
		},
		// 触底加载
		onReachBottom() {
			this.loading && this.getGoods()
		},
		data() {
			return {
				storeId:'',
				loading: false,
				pageNum: 1,
				categoryId: 0,
				categoryList: [],
				where: {},
				sortType: '',
				goodsList: [],			
			}
		},
		methods: {
			async getGoods() {
				// console.log('this.goodsList: ',this.goodsList);
				this.loading = false
				uni.showLoading({
					mask: true
				})
				let data = {
					'storeId': this.storeId,
					'pageSize': 10,
					'status':'0',
					'reasonable': false,
					'pageNum': this.pageNum
				}
				if (this.sortType !== '') {
					data.sortType = this.sortType
				}
				let obj = Object.assign(data, this.where)
				console.log('obj: ', obj);
				// this.where.storeId = 11
				let res = await queryProductList(obj);
				uni.hideLoading();
				if (res.rows.length > 0) {
					this.pageNum++
					this.loading = true
					this.goodsList.push(...res.rows)
				}
				console.log('this.goodsList: ',this.goodsList);
			},
			// 选规格弹窗
			selectSpecsOpen(item) {
				let goodsItem = {
					id:item.id,
					productName: item.productName,
					productCode: item.productCode,
					specsResList: item.specsResList,
				}
				uni.navigateTo({
					url: '/pages/hall/usage?goodsItem='+JSON.stringify(goodsItem)
				});
			},
		}
	}
</script>

<style scoped>
	.goods-item {
		width: 300rpx;
	}

	.margin-xss {
		margin: 8rpx;
	}
	
	.cu-yao{
		width: 158rpx;
		height: 158rpx;
	}
</style>